<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表过滤</title>
    <script src="js/vue.js"></script>
    <style>
        th,td{
            border: 1px solid black;
        }
    </style>
</head>
<body>

<div id="app">
    <h1>{{msg}}</h1>
    <input type="text" placeholder="请输入关键字" v-model="keyword"/>
    <table>
        <tr>
            <th>序号</th>
            <th>英雄</th>
            <th>能量值</th>
            <th>选择</th>
        </tr>
        <tr v-for="(hero , index) in filteredHeros" :key="hero.id">
            <td>{{index + 1}}</td>
            <td>{{hero.name}}</td>
            <td>{{hero.power}}</td>
            <td><input type="checkbox"></td>
        </tr>
    </table>
</div>

<script>
     const vm = new Vue({
             el : '#app',
             //Model M
             data : {
                 keyword : '',
                msg : '列表过滤',
                 heros : [
                     {id : '101' , name : '艾格文' , power : 10000},
                     {id : '102' , name : '麦迪文' , power : 9000},
                     {id : '103' , name : '古尔丹' , power: 8000},
                     {id : '104' , name : '萨尔' , power : 6000}
                 ],
                 filteredHeros : []
             },
            watch:{
                //这里对属性进行监听
                keyword : {
                    immediate:true,
                    handler(val){
                        //这里要根据关键字对数据进行过滤
                        this.filteredHeros = this.heros.filter((hero) => {
                            return hero.name.indexOf(val) >= 0
                        })
                    }
                }
            }
         })

     //回顾filter
     // let arr = [1,2,3,4,5,6,7,8,9]
     // //filter不会破坏原数组的结构,会生成一个全新的数组
     // let newArr = arr.filter((num) => {
     //     //return 过滤规则
     //     return num < 5
     // })
     // console.log(newArr)


     // let str_arr = ["艾格文" , "麦迪文" , '古尔丹' , "萨尔"];
     // let str_arr_new = str_arr.filter((hero) => {
     //     return hero.indexOf("") >= 0
     // })
     // console.log(str_arr_new)
</script>

</body>
</html>